<template>
	<view class="layout">
		
		<view class="img">
			<image :src="item.xq_img" mode="aspectFill"></image>
		</view>
		<view class="title">
			{{item.title}}
		</view>
		<view class="price">
			<view class="gold">
				{{item.gold}}
			</view>
			<view class="label">
				{{item.content}}
			</view>
		</view>
		<view class="num">
			<view class="left">
				{{item.gold}}
			</view>
			<view class="right" @click="addCar(item)">
				<image src="../../static/ic_add.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="car">
			
				<view class="img" @click="goCar">
					<image src="../../static/carShop.png" mode=""></image>
				</view>
			
			
			
			<view>
				￥{{carAllPrice>0?carAllPrice:0}}
			</view>
		</view>
	
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {toFixed} from "../../utils/common.js";
import {onShow} from "@dcloudio/uni-app"
const carData = ref([]);
var   carIndexList = [];//购物车索引
const carAllPrice =ref(0);//购物车总价

 	defineProps({
		item:{
			type:Object,
			default(){
				return{
					xq_img:"../../common/images/14.webp"
				}
			}
		}
	})
	
	onShow(()=>{
		//获取购物车数据
		carData.value = uni.getStorageSync('carData') || [];
		carAllPrice.value = uni.getStorageSync('carAllPrice') || 0;
		carIndexList = uni.getStorageSync('carIndexList') || [];
	})
	
	//去点餐
	const goCar = ()=>{
		uni.switchTab({
			url:"/pages/classify/classify"
		})
	}
	
	//购物车加数据
	const addCar = (data)=>{
		
		
		if(carIndexList.includes(data.id)){
			//在里面就加数量
			carData.value.map((item)=>{
				if(item.id==data.id){
					
					return {
						...item,
						num:item.num++
					}
				}
			});
		}else{
			//不在里面就新数据
			carIndexList.push(data.id);
			//写进购物车
			data['num']=1;
			carData.value.push(data);
		}
		
		//计算总价
		carAllPrice.value = toFixed(carAllPrice.value + data.gold,2);
		//写进缓存
		uni.setStorageSync('carData',carData.value);
		uni.setStorageSync('carAllPrice',carAllPrice.value);
		uni.setStorageSync('carIndexList',carIndexList);
		
		
	}
</script>

<style lang='scss' scoped>
	.layout{
		background: #fff;
		border-radius: 20rpx;
		.title{
			font-size: 34rpx;
			font-weight: 600;
			padding: 0 15rpx;
		}
		.price{
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			.label{
				padding-left: 15rpx;
				font-size:22rpx;
				color: red;
			}
			.gold{
				
			}
		}
		
		.num{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 15rpx;
			.left{
				color: red;
				font-size: 32rpx;
				font-weight: 600;
			}
			.right{
				margin-right:30rpx;
				width:50rpx;
				height: 50rpx;
				image{
					 width:100%;
					 height: 100%;
				}
			}
		}
		
		.car{
			
			display: flex;
			padding: 0 15rpx;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			color: $xx-color-body;
			.img{
				 width:70rpx;
				 height:100%;
				 margin-right: 15rpx;
				 
				 image{
					padding-right: 15rpx;
					width:70rpx;
					height:70rpx;
				 }
			}
			
		}
	}      
</style>